<template>
<el-row>
	<!--预览/下载附件dialog-->
	<el-dialog title='文件操作' :visible.sync="fileOptVisible" :fullscreen="fullscreen" append-to-body>
		<div slot="title">
	    <span class="title-text">{{file.name}}</span>
	    <el-button type="text" size="mini"><i class="fa fa-download"></i> <a :href="file.url" download>下载</a></el-button>
	    <button type="button" class="el-fullscreen" @click="fullScreen"><i :class="screenIcon"></i></button>
	  </div>
	  <div class="pdfTitle" v-if="previewType=='pdf'">
	    <el-button size="small" @click="changePdfPage(0)">上一页</el-button>
	    <span>{{currentPage}}/{{pageCount}}</span>
	    <el-button size="small" @click="changePdfPage(1)">下一页</el-button>
			<pdf
				:src="file.url"
				:page="currentPage"
				@num-pages="pageCount=$event"
				@page-loaded="currentPage=$event">
			</pdf>
		</div>

		<el-image
			v-if="previewType=='image'"
			style="width: 100%;"
    	:src="file.url">
  	</el-image>
	</el-dialog>

	<el-col :lg="6">
		<el-col :span="8">
			<i class="el-icon-remove-outline wait" style="font-size: 40px;" v-if="task.status=='wait'"></i>
			<i class="el-icon-time run" style="font-size: 40px;" v-else-if="task.status=='run'"></i>
			<i class="el-icon-circle-check finish" style="font-size: 40px;" v-else></i>
		</el-col>
		<el-col :span="12">
			<div style="color:black;">
				<span v-if="task.status=='wait'">未进行</span>
				<span v-else-if="task.status=='run'">进行中</span>
				<span v-else>已完成</span>
			</div>
			<div style="color:#7a838f;font-size: 12px;">当前状态</div>
		</el-col>
	</el-col>

	<el-col :lg="6">
		<el-col :span="8">
			<div>
	      <el-avatar style="background: #83e17e;">{{task.member[0].substring(0,1)}}</el-avatar>
	    </div>
		</el-col>
		<el-col :span="12">
			<div style="color:black;">{{task.member[0]}}</div>
			<div style="color:#7a838f;font-size: 12px;">负责人</div>
		</el-col>
	</el-col>

	<el-col :lg="6">
		<el-col :span="8">
			<i class="fa fa-calendar-o" style="font-size: 40px;"></i>
		</el-col>
		<el-col :span="12">
			<div style="color:black;">{{formatTime(task.begin_date)}}</div>
			<div style="color:#7a838f;font-size: 12px;">开始日期</div>
		</el-col>
	</el-col>

	<el-col :lg="6">
		<el-col :span="8">
			<i class="fa fa-calendar-check-o" style="font-size: 40px;"></i>
		</el-col>
		<el-col :span="12">
			<div style="color:black;">{{formatTime(task.end_date)}}</div>
			<div style="color:#7a838f;font-size: 12px;">截止日期</div>
		</el-col>
	</el-col>

	<el-col>
		<el-divider content-position="left">基本信息</el-divider>
		<div style="margin:20px;">
			<el-col :span="6">
				<div>项目名称:</div><div style="color: #23d8bb;margin: 10px 0px;">{{task.project}}</div>
			</el-col>
			<el-col :span="6">
				<div>流程名:</div><div style="color: #23d8bb;margin: 10px 0px;">{{task.flow_name}}</div>
			</el-col>
			<el-col :span="6">
				<div>任务名:</div><div style="color: #23d8bb;margin: 10px 0px;">{{task.task_name}}</div>
			</el-col>
			<el-col :span="6">
				<div>优先级:</div><div style="color: #23d8bb;margin: 10px 0px;">{{task.priority}}</div>
			</el-col>
		</div>
		
	</el-col>

	<el-col>
		<el-divider content-position="left">描述</el-divider>
		<div class="pre-line" style="margin:20px;">{{task.desc}}</div>
		<!--
		<div :class="{hiddenInput:editDesc}" class="pre-line">{{task.desc}}</div>
		<el-input
			:class="{hiddenInput:!editDesc}"
    	type="textarea"
    	:autosize="{ minRows: 2, maxRows: 10}"
    	v-model="task.desc"
    	@blur="saveInput('desc')"
    	ref="editDesc">
    </el-input>
    <div style="color: #aaa!important;margin-top: 10px;text-align: right;" :class="{hiddenInput:editDesc}">
    	<i class="fa fa-edit" @click="editInput('desc')" style="cursor: pointer;"></i>
    </div>-->
	</el-col>

	<el-col>
		<el-divider content-position="left">工作记录</el-divider>
		<div :class="{hiddenInput:editLog}" class="pre-line" style="margin:20px;">{{task.log}}</div>
		<el-input
			:class="{hiddenInput:!editLog}"
    	type="textarea"
    	placeholder="请输入大概工作记录"
    	:autosize="{ minRows: 5, maxRows: 20}"
    	v-model="task.log"
    	@blur="saveInput('log')"
    	ref="editLog">
    </el-input>
    <div style="color: #aaa!important;margin-top: 10px;text-align: right;" :class="{hiddenInput:editLog}">
    	<i class="fa fa-edit" @click="editInput('log')" style="cursor: pointer;"></i>
    </div>
	</el-col>

	<el-col>
		<el-divider content-position="left">附件</el-divider>
		<el-upload
    	multiple
		  class="upload-demo"
		  :data="attachForm"
			:headers="headers"
		  :action="attachUrl"
		  :before-upload="beforeUpload"
	    :before-remove="removeFile"
	    :on-success="upSuccess"
	    :on-error="upError"
		  :file-list="task.attach"
		  :on-preview="onPreview">
		  <el-button slot="trigger" size="small" plain type="primary"><i class="fa fa-plus"></i>添加附件</el-button>
		  <span style="float: right;">共 {{task.attach.length}} 个附件</span>
		</el-upload>
	</el-col>
</el-row>
</template>

<script>
import {patchAPItoken,deleteAPItoken} from '@/utils/api'
import pdf from 'vue-pdf'
export default {
	components: {
		pdf
	},
	props: {
		task: Object
	},
	data () {
		return {
			file: {},
			previewType: null,
			currentPage: 1, // pdf文件页码
      pageCount: 0, // pdf文件总页数
      fullscreen: false,
			screenIcon: 'fa fa-expand',
			headers: {
        'Authorization': 'Token ' + this.$store.state.user.token
      },
			editDesc: false,
			editLog: false,
			fileOptVisible: false,
			attachUrl: API.taskAttach,
			attachForm: {}
		}
	},
	methods: {
		editInput (type) {
    	if(type == 'desc'){
    		this.editDesc = true
    		this.$nextTick(()=>{
    			this.$refs.editDesc.focus()
    		})
    	}else{
    		this.editLog = true
    		this.$nextTick(()=>{
    			this.$refs.editLog.focus()
    		})
    	}
    },
    saveInput (type) {
    	if(type == 'desc'){
    		this.editDesc = false
    	}else{
    		this.editLog = false
    	}
    	const promise = patchAPItoken(API.subTask+this.task.id+'/',{'log':this.task.log},this.$store.state.user.token)
    	promise.then((res)=>{
    		console.log(res)
    	})
    },
    FormatTime(time,fmt){
		  var o = {
	      "M+": time.getMonth() + 1, //月份 
	      "d+": time.getDate(), //日 
	      "H+": time.getHours(), //小时 
	      "m+": time.getMinutes(), //分 
	      "s+": time.getSeconds(), //秒 
	      "q+": Math.floor((time.getMonth() + 3) / 3), //季度 
	      "S": time.getMilliseconds() //毫秒 
		  }
		  if (/(y+)/.test(fmt))
		  	console.log(time.getFullYear())
		  	fmt = fmt.replace(RegExp.$1, (time.getFullYear() + "").substr(4 - RegExp.$1.length))
		  for (var k in o)
		  if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)))
		  return fmt
		},
		formatTime (date_string) {
			var s1 = date_string.replace(/-/g,"/")
			var s2 = s1.replace(/T/g," ")
			var date = new Date(s2)
			return this.FormatTime(date, 'MM月dd日')
		},
		delFile (id,fileList) {
			const promise = deleteAPItoken(API.taskAttach+id+'/',this.$store.state.user.token)
			promise.then((res)=>{
				if (res.status) {
					fileList.forEach((v,i)=>{
						if(v.id==id){
							fileList.splice(i,1)
						}
					})
					this.$message({
            type: 'success',
            message: '删除成功!'
          })
				} else {
					this.$message({
            type: 'error',
            message: '删除失败!, '+res.data
          })
				}
			})
		},
		removeFile (file,fileList) {
			if (file.status === 'success'){
				this.$confirm('删除'+file.name+', 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
        	this.delFile(file.id,fileList)
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
          return false    
        })
      } 
			return false
		},
		onPreview (file) {
			if (file.name.endsWith('pdf')){
    		this.previewType = 'pdf'
    	}else{
    		this.previewType = 'image'
    	}
    	this.file = file
    	this.fileOptVisible = true
		},
		beforeUpload (file,fileList) {
			this.attachForm['task'] = this.task.id
			this.attachForm['attach'] = file
		},
		upSuccess (response, file, fileList) {
			file['id'] = response.id
			this.$notify({
        title: '成功',
        message: file.name+'上传成功!',
        type: 'success'
      })
		},
		upError (err, file, fileList) {
			this.$notify({
        title: '失败',
        message: err,
        type: 'error'
      })
		},
		fullScreen () {
    	if (this.fullscreen){
				this.fullscreen = false
				this.screenIcon = 'fa fa-expand'
    	}else{
    		this.fullscreen = true
    		this.screenIcon = 'fa fa-compress'
    	}
    },
    changePdfPage (val) {
      // console.log(val)
      if (val === 0 && this.currentPage > 1) {
        this.currentPage--
        // console.log(this.currentPage)
      }
      if (val === 1 && this.currentPage < this.pageCount) {
        this.currentPage++
        // console.log(this.currentPage)
      }
    },
	}
}
</script>

<style scoped>
.hiddenInput{
	display: none;
  white-space: pre-wrap;
}

.pre-line {
  white-space: pre-line;
}
.el-button--mini, .el-button--mini.is-round {
  padding: 7px 7px;
}
.el-fullscreen {
  position: absolute;
  top: 20px;
  right: 40px;
  padding: 0;
  background: 0 0;
  border: none;
  outline: 0;
  cursor: pointer;
  font-size: 12px;
}
a {
	text-decoration:none;
	color: #409eff;
}

.file-link{
	overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
</style>